前言

昨天我們已經使用TableView的「titleForHeaderInSection()」將TableViewHeader做出來了，
但是可以發現TableViewHeader不論是底色或是字的顏色都不是我們要的，
因此今天就要來客製化一個View，並使用在TableViewHeader上面。

實作

首先先客製化一個View，這個View擁有幾個特徵：

• 黑色的背景色
• 白色字體
• 擁有一個Label (用來顯示文字)

那就馬上來實作View吧！

1. 建立一個View，並命名為：「AlarmHeaderView」，內容為以下：

可以發現我們在實作Label時，並沒有給他文字內容，因為兩個TableViewHeader要顯示的文字內容不同
因此等等在實作TableViewHeader時，再給他文字內容即可。

class AlarmHeaderView: UIView {
    // MARK: - Properties
    // MARK: - IBOutLets
    
    // 建立一個Label，用來顯示文字
    let headerViewLabel: UILabel = {
        let label = UILabel()
        // 該Label的字體顏色為白色
        label.textColor = .white
        label.font = UIFont.boldSystemFont(ofSize: 20)
        return label
    }()
    
    // MARK: - Init
    override init(frame: CGRect) {
        super.init(frame: frame)
        // 該View的背景色為黑色
        self.backgroundColor = .black
        setViews()
        setLayouts()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    // MARK: - Function
    // MARK: - setViews
    func setViews() {
        self.addSubview(headerViewLabel)
    }
    // MARK: - setLayouts
    func setLayouts() {
        headerViewLabel.snp.makeConstraints { make in
            make.top.bottom.equalTo(self)
            make.leading.equalTo(self).offset(10)
        }
    }
}

2.回到「AlarmViewController」，並在TableView中的「viewForHeaderInSection()」加入以下Code

於此時將「AlarmHeaderView」內的 Label 加上文字。

func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
        switch section {
        case 0:
            // 建立一個View，這個View為我們建立的「AlarmHeaderView」
            let view: AlarmHeaderView = {
                let view = AlarmHeaderView()
                
                // 將該HeaderView的內容文字更改為：「睡眠｜起床鬧鐘」
                view.headerViewLabel.text = "睡眠｜起床鬧鐘"
                
                // 回傳該View，作為第一個Setcion的HeaderView
                return view
            }()
            return view
        case 1:
            // 建立一個View，這個View為我們建立的「AlarmHeaderView」
            let view: AlarmHeaderView = {
                let view = AlarmHeaderView()
                
                // 將該HeaderView的內容文字更改為：「其他」
                view.headerViewLabel.text = "其他"
                
                // 回傳該View，作為第一個Setcion的HeaderView
                return view
            }()
            return view
        default:
            break
        }
        return UIView()
    }

上述程式碼的功用是：將我們創建的「AlarmHeaderView」當作是TableView的HeaderView，
因此現在畫面應該會像下面這樣

如果不太能理解的話，可以稍微去動動「AlarmHeaderView」的屬性，例如背景色將它更改為藍色

override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = .systemBlue
        setViews()
        setLayouts()
    }

再執行看看，就可以發現TableView的HeaderView的背景色也變成藍色了